<template>
  <div class="mod-demo-echarts">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="监测点">
        <el-select
          v-model="dataForm.measurePoint"
          clearable
          placeholder="选择监测点"
          @change="measurePointChange()"
        >
          <el-option
            v-for="item in measurePointOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监测深度">
        <el-select v-model="dataForm.deep" clearable placeholder="选择深度">
          <el-option
            v-for="item in deepOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="查询范围">
        <el-date-picker
          v-model="dataForm.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dataForm.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()"
        >查询</el-button
      >
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div id="J_chartForDisplacement" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="J_chartForConRate" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      dataForm: {
        measurePoint: "",
        deep: "",
        begin: "",
        end: ""
      },
      measurePointOptions: [],
      deepOptions: [],

      chartLineForDisplacement: null,
      chartLineForConRate: null,

      xDataForDisplacement: [],
      yDataForDisplacement: [],
      xDataForConRate: [],
      yDataForConRate: [],

      DisplacementMin: -100,
      DisplacementMax: 100,
      ConRateMin: -100,
      ConRateMax: 100
    };
  },
  created() {
    this.initMeasurePointOptions();
  },
  mounted() {
    //this.initChartLine();
    this.getList();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLineForDisplacement) {
      this.chartLineForDisplacement.resize();
    }
    if (this.chartLineForConRate) {
      this.chartLineForConRate.resize();
    }
  },
  methods: {
    // 初始化监测点
    initMeasurePointOptions() {
      this.$http({
        url: this.$http.adornUrl(
          "/generator/switchtofbgconfig/getMeasurePoint"
        ),
        method: "get"
      }).then(({ data }) => {
        this.measurePointOptions = data.list;
      });
    },
    // 选择监测点后
    measurePointChange() {
      this.initDeepOptions();
    },
    // 初始化对应监测点下面的深度
    initDeepOptions() {
      this.$http({
        url: this.$http.adornUrl(
          "/generator/sensor/getDeepByMeasurePoint?measurePoint=" +
            this.dataForm.measurePoint
        ),
        method: "get"
      }).then(({ data }) => {
        this.deepOptions = data.list;
      });
    },
    // 初始化横纵坐标
    getList() {
      this.initForDisplacement();
      this.initForConRate();
    },
    initForDisplacement() {
      this.$http({
        url: this.$http.adornUrl(
          "/generator/displacement/get/displacement/data"
        ),
        method: "post",
        data: this.dataForm
      }).then(({ data }) => {
        this.xDataForDisplacement = data.resVo.xdataForDisplacement;
        this.yDataForDisplacement = data.resVo.ydataForDisplacement;
        this.DisplacementMin = -100;
        this.DisplacementMax = 100;
        let maxYLable = 0;
        let minYlable = 0;
        let len = this.yDataForDisplacement.length;
        for (let i = 0; i < len; i++) {
          if (this.yDataForDisplacement[i] > maxYLable) {
            maxYLable = this.yDataForDisplacement[i];
          }
          if (this.yDataForDisplacement[i] < minYlable) {
            minYlable = this.yDataForDisplacement[i];
          }
        }
        let index1 = 3;
        let index2 = 3;
        while (minYlable < this.DisplacementMin && index1 > 0) {
          this.DisplacementMin *= 5;
          index1--;
        }
        while (maxYLable > this.DisplacementMax && index2 > 0) {
          this.DisplacementMax *= 5;
          index2--;
        }
        this.initChartForDisplacement();
      });
    },
    initForConRate() {
      this.$http({
        url: this.$http.adornUrl("/generator/conrate/get/conrate/data"),
        method: "post",
        data: this.dataForm
      }).then(({ data }) => {
        this.xDataForConRate = data.resVo.xdataForConRate;
        this.ydataForConRate = data.resVo.ydataForConRate;
        this.ConRateMin = -100;
        this.ConRateMax = 100;
        let maxYLable = 0;
        let minYlable = 0;
        let len = this.ydataForConRate.length;
        for (let i = 0; i < len; i++) {
          if (this.ydataForConRate[i] > maxYLable) {
            maxYLable = this.ydataForConRate[i];
          }
          if (this.ydataForConRate[i] < minYlable) {
            minYlable = this.ydataForConRate[i];
          }
        }
        let index1 = 3;
        let index2 = 3;
        while (minYlable < this.ConRateMin && index1 > 0) {
          this.ConRateMin *= 5;
          index1--;
        }
        while (maxYLable > this.ConRateMax && index2 > 0) {
          this.ConRateMax *= 5;
          index2--;
        }
        this.initChartForConRate();
      });
    },

    // 画图
    initChartForDisplacement() {
      var option = {
        title: {
          text: "位移量(mm)"
        },
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0]
          },
          {
            type: "inside",
            yAxisIndex: [0]
          }
        ],
        xAxis: {
          data: this.xDataForDisplacement,
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          min: this.DisplacementMin,
          max: this.DisplacementMax
        },
        series: [
          {
            data: this.yDataForDisplacement,
            type: "line"
          }
        ]
      };
      this.chartLineForDisplacement = echarts.init(
        document.getElementById("J_chartForDisplacement")
      );
      this.chartLineForDisplacement.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLineForDisplacement.resize();
      });
    },
    initChartForConRate() {
      var option = {
        title: {
          text: "位移变化率(mm/天)"
        },
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0]
          },
          {
            type: "inside",
            yAxisIndex: [0]
          }
        ],
        xAxis: {
          data: this.xDataForConRate,
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          min: this.DisplacementMin,
          max: this.DisplacementMax
        },
        series: [
          {
            data: this.ydataForConRate,
            type: "line"
          }
        ]
      };
      this.chartLineForConRate = echarts.init(
        document.getElementById("J_chartForConRate")
      );
      this.chartLineForConRate.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLineForConRate.resize();
      });
    }
  }
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
